<template>
  <div class="login-page">
    <div class="login-container">
      <!-- Logo和标题 -->
      <div class="login-header">
        <div class="logo">
          <i class="fas fa-balance-scale text-4xl text-blue-600"></i>
        </div>
        <h1 class="title">律智助手2.0</h1>
        <p class="subtitle">专业的法律服务管理平台</p>
      </div>

      <!-- 登录表单 -->
      <div class="login-form">
        <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="form">
          <!-- 角色选择 -->
          <el-form-item prop="role">
            <el-select 
              v-model="loginForm.role" 
              placeholder="请选择您的身份" 
              class="w-full"
              size="large"
            >
              <el-option label="当事人" value="client">
                <div class="flex items-center">
                  <i class="fas fa-user mr-2 text-blue-600"></i>
                  <span>当事人</span>
                </div>
              </el-option>
              <el-option label="律师" value="lawyer">
                <div class="flex items-center">
                  <i class="fas fa-gavel mr-2 text-green-600"></i>
                  <span>律师</span>
                </div>
              </el-option>
              <el-option label="市场部" value="marketing">
                <div class="flex items-center">
                  <i class="fas fa-chart-line mr-2 text-purple-600"></i>
                  <span>市场部</span>
                </div>
              </el-option>
              <el-option label="审核部" value="finance">
                <div class="flex items-center">
                  <i class="fas fa-check-circle mr-2 text-orange-600"></i>
                  <span>审核部</span>
                </div>
              </el-option>
              <el-option label="鉴定部" value="appraisal">
                <div class="flex items-center">
                  <i class="fas fa-stethoscope mr-2 text-red-600"></i>
                  <span>鉴定部</span>
                </div>
              </el-option>
              <el-option label="管理员" value="admin">
                <div class="flex items-center">
                  <i class="fas fa-cog mr-2 text-gray-600"></i>
                  <span>管理员</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input 
              v-model="loginForm.username" 
              placeholder="请输入用户名/手机号"
              size="large"
              prefix-icon="User"
            />
          </el-form-item>

          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input 
              v-model="loginForm.password" 
              type="password" 
              placeholder="请输入密码"
              size="large"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <!-- 记住密码 -->
          <div class="flex items-center justify-between mb-6">
            <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
            <a href="#" class="text-blue-600 hover:text-blue-800 text-sm">忘记密码？</a>
          </div>

          <!-- 登录按钮 -->
          <el-button 
            type="primary" 
            size="large" 
            class="w-full login-btn"
            :loading="loading"
            @click="handleLogin"
          >
            {{ loading ? '登录中...' : '登录' }}
          </el-button>
        </el-form>

        <!-- 其他登录方式 -->
        <div class="other-login">
          <div class="divider">
            <span>其他登录方式</span>
          </div>
          
          <div class="social-login">
            <button class="social-btn wechat">
              <i class="fab fa-weixin"></i>
              <span>微信登录</span>
            </button>
            
            <button class="social-btn qq">
              <i class="fab fa-qq"></i>
              <span>QQ登录</span>
            </button>
          </div>
        </div>

        <!-- 测试账号提示 -->
        <div class="demo-accounts">
          <div class="demo-info">
            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
            <span class="demo-text">测试账号：<strong>admin / 123456</strong></span>
          </div>
        </div>

        <!-- 注册链接 -->
        <div class="register-link">
          <span>还没有账号？</span>
          <router-link to="/register" class="text-blue-600 hover:text-blue-800 font-medium">
            立即注册
          </router-link>
        </div>
      </div>
    </div>

    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="decoration-circle circle-3"></div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

export default {
  name: 'Login',
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const loginFormRef = ref()
    const loading = ref(false)

    const loginForm = reactive({
      role: 'client',
      username: 'admin',
      password: '123456',
      remember: false
    })

    const loginRules = {
      role: [
        { required: true, message: '请选择您的身份', trigger: 'change' }
      ],
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, message: '用户名至少3个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码至少6个字符', trigger: 'blur' }
      ]
    }

    const setDemoAccount = (role) => {
      const demoAccounts = {
        client: { username: 'demo', role: 'client' },
        lawyer: { username: 'lawyer', role: 'lawyer' },
        marketing: { username: 'marketing', role: 'marketing' },
        finance: { username: 'finance', role: 'finance' },
        appraisal: { username: 'appraisal', role: 'appraisal' },
        admin: { username: 'admin', role: 'admin' }
      }
      
      const account = demoAccounts[role]
      if (account) {
        loginForm.role = account.role
        loginForm.username = account.username
        loginForm.password = '123456'
        ElMessage.success(`已切换到${role === 'client' ? '当事人' : role === 'lawyer' ? '律师' : role === 'marketing' ? '市场部' : role === 'finance' ? '财务部' : role === 'appraisal' ? '鉴定部' : '管理员'}账号`)
      }
    }

    const handleLogin = async () => {
      try {
        await loginFormRef.value.validate()
        loading.value = true

        // 模拟登录API调用
        await new Promise(resolve => setTimeout(resolve, 1000))

        // 模拟登录成功
        const userData = {
          userInfo: {
            id: 1,
            name: loginForm.username,
            role: loginForm.role,
            avatar: ''
          },
          token: 'mock-token-' + Date.now(),
          role: loginForm.role
        }

        userStore.login(userData)
        ElMessage.success('登录成功')

        // 根据角色跳转到对应首页
        const roleRoutes = {
          client: '/client',
          lawyer: '/lawyer',
          marketing: '/marketing',
          finance: '/finance',
          appraisal: '/appraisal',
          admin: '/admin'
        }

        const targetRoute = roleRoutes[loginForm.role] || '/client'
        router.push(targetRoute)

      } catch (error) {
        if (error !== false) {
          ElMessage.error('登录失败，请检查用户名和密码')
        }
      } finally {
        loading.value = false
      }
    }

    return {
      loginForm,
      loginRules,
      loginFormRef,
      loading,
      handleLogin
    }
  }
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 10;
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.logo {
  margin-bottom: 16px;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 8px;
}

.subtitle {
  color: #6b7280;
  font-size: 14px;
}

.login-form {
  margin-bottom: 24px;
}

.form {
  margin-bottom: 24px;
}

.login-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 500;
}

.other-login {
  margin-bottom: 24px;
}

.divider {
  position: relative;
  text-align: center;
  margin: 24px 0;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e5e7eb;
}

.divider span {
  background: white;
  padding: 0 16px;
  color: #6b7280;
  font-size: 14px;
}

.social-login {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
}

.social-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.social-btn.wechat:hover {
  border-color: #10b981;
  color: #10b981;
}

.social-btn.qq:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.social-btn i {
  font-size: 20px;
  margin-bottom: 4px;
}

.social-btn span {
  font-size: 12px;
}

.demo-accounts {
  margin-bottom: 20px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.demo-info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-text {
  font-size: 14px;
  color: #4a5568;
}

.demo-text strong {
  color: #2d3748;
  font-weight: 600;
}

.register-link {
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
  width: 200px;
  height: 200px;
  top: -100px;
  right: -100px;
}

.circle-2 {
  width: 150px;
  height: 150px;
  bottom: -75px;
  left: -75px;
}

.circle-3 {
  width: 100px;
  height: 100px;
  top: 50%;
  right: 10%;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-container {
    margin: 20px;
    padding: 24px;
  }
  
  .title {
    font-size: 24px;
  }
  
  .social-login {
    flex-direction: column;
    align-items: center;
  }
  
  .social-btn {
    width: 100%;
    max-width: 200px;
  }
}
</style> 